<template>
    <button @click="emitEventAge">更改年龄</button>
    <br>
    <br>
    <button @click="$emit('changeAgeAndName', 10, 'Annie')">
        更改年龄和名字
    </button>
    <br>
    <br>
    <button @click="$emit('changeStudent', { age: 40, name: 'Drew', sex: '男' })">
        更改学生（验证通过）
    </button>
    <br>
    <br>
    <button @click="$emit('changeStudent', { age: -10, name: 'Tom', sex: '男' })">
        更改学生（验证失败）
    </button>
</template>

<script>
export default {
    emits: { // 自定义事件选项
        changeAge: null,  // 无需验证
        changeAgeAndName: null,  // 无需验证
        changeStudent: stu => {
            if (stu.age <= 0) {
                console.warn('年龄不得小于等于0')
                return false // false：验证不通过，会有警告语句，父组件依旧可以获取该值
            }
            return true // true：验证通过
        }
    },
    methods: {
        emitEventAge() {
            this.$emit('changeAge', 30) // 选项式通过 this.$emit 触发自定义事件，并传值
        }
    }
}
</script>

<script setup>
let emit = defineEmits({ // 自定义事件
    changeAge: null, // 无需验证
    changeAgeAndName: null, // 无需验证
    changeStudent: stu => {
        if (stu.age <= 0) {
            console.warn('年龄不得小于等于0')
            return false // false：验证不通过，会有警告语句，父组件依旧可以获取该值
        }
        return true // true：验证通过
    }
})

function emitEventAge() {
    emit('changeAge', 30)  // 选项式通过 this.$emit 触发自定义事件，并传值
}
</script>